<template>
  <div>
    <div
      v-for="item in dataList"
      :key="item.id+'-child'"
      class="container-li-tree"
      @mouseenter="openAlert(item)"
      @mouseleave="closeAlert"
      @click="openFl(item)"
    >
      <span :style="item.id === active ? customStyle: ''">{{ item.title }}</span>
    </div>
  </div>
</template>

<script>
import { queryAllFlByPid } from '@/api/config/special'
import { isEmpty } from 'lodash'
export default {
  name: 'SpecialItem',
  props: {
    pid: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      dataList: [],
      customStyle: {},
      active: null,
      form: {
        pid: this.pid,
        page: 1,
        size: 3
      }
    }
  },
  computed: {
    themes() {
      return this.$store.getters.theme
    }
  },
  watch: {
    themes: {
      handler(newData, oldData) {
        this.customStyle.color = newData.changeFontColor
        this.customStyle.background = newData.changeBackGroundColor
        this.customStyle = Object.assign({}, this.customStyle)
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    pid: {
      handler(newId) {
        this.form.pid = newId
        this.init()
      },
      immediate: true // 父组件第一次传值时
    }
  },
  methods: {
    openAlert(item) {
      this.active = item.id
    },
    closeAlert() {
      this.active = null
    },
    openFl(item) {
      this.$emit('fact-fl', item)
    },
    init() {
      const object = sessionStorage.getItem('special-item-' + this.form.pid)
      if (!isEmpty(object)) {
        this.dataList = JSON.parse(object)
      } else {
        queryAllFlByPid(this.form).then(res => {
          const { data } = res
          if (!isEmpty(data)) {
            this.dataList = data.data
            sessionStorage.setItem('special-item-' + this.form.pid, JSON.stringify(data.data))
          }
        }).catch(() => {
          console.log('初始化数据失败！')
        })
      }
    }
  }
}
</script>
<style scoped>
.container-li-tree{
  width:33.333% ;
  float: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  padding: 0px 5px;
  box-sizing: border-box;
  text-align: center;
}
.container-li-tree:not(:first-child):before {
  content: '';
  position: absolute;
  width: 1px;
  height: 14px;
  top: 4px;
  bottom: 3px;
  left: 1px;
  background-color: #a1a4bb;
  z-index: 10000;
}
</style>
